<template>
  <section class="container">
    <div v-for="item in stopList" :key="item.key" class="stop-view">
      <div class="stop-view-item">
        <img :src="images.stop" style="width: 20px; margin-right: 10px;">
        <label>{{item.stopName}}</label>
      </div>
      <div class="stop-view-item">
        <img :src="images.bus" style="width: 20px; margin-right: 10px;">
        <label>距离{{item.stopdis}}站</label>
      </div>
      <div class="stop-view-item">
        <img :src="images.time" style="width: 20px; margin-right: 10px;">
        <label>还有{{item.time}}分钟</label>
      </div>
    </div>
  </section>
</template>

<script>
import api from "../api";
import images from "../static/images";

export default {
  layout: "empty",
  data() {
    return {
      images: images,
      stopList: [{
        key: '01',
        stopName: '北艾路',
        stopdis: 0,
        time: 999
      },{
        key: '02',
        stopName: '景明路',
        stopdis: 0,
        time: 999
      }],
      beiAiData: {},
      jingMingData: {},
    };
  },
  methods: {
    getStopList() {
      api.getArriveBase({
        name: '徐川专线',
        lineid: 503900,
        stopid: 13,
        direction: 1
      }).then(res => {
        if (!!res) {
          let data = res.cars.length && res.cars[0] || {};
          if (data.time) {
            this.stopList[0].time = parseInt(data.time / 60) ;
            this.stopList[0].stopdis = data.stopdis;
          }
        }
      })

      api.getArriveBase({
        name: '徐川专线',
        lineid: 503900,
        stopid: 27,
        direction: 0
      }).then(res => {
        if (!!res) {
          let data = res.cars.length && res.cars[0] || {};
          if (data.time) {
            this.stopList[1].time = parseInt(data.time / 60) ;
            this.stopList[1].stopdis = data.stopdis;
          }
        }
      })
    },
    startTimer() {
      this.getStopList();
      setTimeout(() => {      
        this.startTimer();
      }, 20000);
    }
  },
  mounted(){
    this.startTimer(); 
  }
};
</script>

<style>
.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background: #f1f1f1;
}
.stop-view {
  display: flex;
  flex-direction: row;
  padding: 10px;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-top: 1px;
}
.stop-view-item {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
</style>

